<template>
	<view>
		<detail-lst :lstData="lstData"></detail-lst>	
		<!-- <view class="approveStep">
			<u-time-line>
				<u-time-line-item v-for="(item,key) in stepLst" :key="key">
					<template v-slot:node v-if="item.isFinish">
						<view class="u-node" style="background: #009688;">
							<u-icon name="checkmark" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view>
							<view class="u-order-title">{{item.title}}</view>
							<view class="u-order-handler">处理人：{{item.handler}}</view>
							<view class="u-order-desc">{{item.desc}}</view>
							<view class="u-order-time">{{item.time}}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view> -->
		<view class="approveStep">
			<timeline>
				<timelineItem :leftTime='item.time' :color="item.isFinish?'#009688':'#dddcdc'" v-for="(item,key) in stepLst" :key="key">
					<view class="tripItem">
						<view class="title">{{item.title}}</view>
						<view class="tips">处理人：{{item.handler}} <br/>{{item.desc}}</view>
					</view>
				</timelineItem>
			</timeline>
		</view>
	</view>
</template>
<script>
import detailLst from '../components/detailLst.vue'
import timeline from '../../components/chenbin-timeline/timeLine.vue'
import timelineItem from '../../components/chenbin-timeline/timelineItem.vue'
export default {
	name: '',
	components:{
		detailLst,
		timeline,
		timelineItem
	},
	data() {
		return {
			lstData:[{
				label:'假期类型',
				txt:'调休'
			},{
				label:'申请单位',
				txt:'0.5天'
			},{
				label:'开始时间',
				txt:'2021-8-18 09:00'
			},{
				label:'结束时间',
				txt:'2021-8-20 18:00'
			},{
				label:'申请时长',
				txt:'1天'
			},{
				label:'申请事由',
				txt:'请年休假'
			},{
				label:'申请状态',
				txt:'审批中'
			}],
			stepLst:[]
		}
	},
	methods: {
		getStepLst(){
			this.stepLst = [{
				isFinish:true,
				title:'提交申请',
				time:'2021-5-4',
				handler:'尤雨溪'
			},{
				isFinish:true,
				title:'组长审批',
				desc:'审批意见：同意。',
				time:'2021-5-5',
				handler:'钱端'
			},{
				isFinish:true,
				title:'部门领导审批',
				desc:'审批意见：同意。',
				time:'2021-5-5',
				handler:'李好'
			},{
				isFinish:false,
				title:'HR归档',
				handler:'HR李斯'
			}]
		}
	},
	onLoad(){
		this.getStepLst()
	},
	onReady(){
	    
	},
};
</script>
<style lang="scss" scoped>
	.approveStep{
		padding: 41.66rpx;
	}
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
		margin-bottom: 6rpx;
	}
	.u-order-handler{
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
	.tripItem {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background:rgba(255,255,255,1);
		box-shadow:0px 0px 20px 0px rgba(0,0,0,0.08);
		border-radius:10px;
		margin-bottom: 5rpx;
		.title {
			font-size:28rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			color:rgba(51,51,51,1);
		}
		.tips {
			font-size:22rpx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(153,153,153,1);
			margin-top: 20rpx;
		}
	}

</style>
<style>
	.timelineItem .timeItem .leftTime{
		width: 166.66rpx !important;
	}
</style>